<template>
  <div class="son">
    <h3>child</h3>
    <h4>父传子: {{ car }}</h4>
    <h4>子级变量 carName: <input type="text" v-model="carName" /> {{ carName }}</h4>
    <!-- 
    <p>
      v-model的本质
      <input
        type="text"
        :value="carName"
        @input="carName =(<HTMLInputElement>$event.target).value"
      />
    </p> -->

    <button @click="sendName(carName)">点击传值给父组件-按属性</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="xyz('send-carName', carName)">点击传值给父组件-按方法</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button @click="mitter.emit('send-data', carName)">点击传值给隔壁组件-按mitt</button>
  </div>
</template>

<script setup lang="ts">
import mitter from '@/utils/mitter.ts'
defineProps(['car', 'send-name']) //子传父-按属性
const xyz = defineEmits(['send-carName']) //子传父-按事件

import { ref } from 'vue'

let carName = ref('幻影')
</script>

<style scoped>
.son {
  background-color: paleturquoise;
  width: 90%;
  height: 230px;
  border: 1px solid black;
  border-radius: 10px;
}
</style>